<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style media="screen">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout article div {
        min-height: 100px;
    }

</style>

<body>
<!--浮动布局-->
<section class="layout float">
    <style media="screen">
        .layout.float .left {
            float: left;
            width: 300px;
            background: red;
        }

        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }

        .layout.float .center {
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动解决方案</h1>
            center
        </div>
    </article>
</section>

<!--绝对定位-->
<section class="layout absolute">
    <style>
        .layout.absolute .left-center-right > div {
            position: absolute;
        }

        .layout.absolute .left {
            left: 0;
            width: 300px;
            background: red;
        }

        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }

        .layout.absolute .right {
            right: 0;
            width: 300px;
            background: blue;
        }

    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>绝对定位解决方案</h1>
            center
        </div>
        <div class="right"></div>
    </article>

</section>

<!--flexbox-->
<section class="layout flexbox">
    <style>
        .layout.flexbox {
            margin-top: 140px;
        }

        .layout.flexbox .left-center-right {
            display: flex;
        }

        .layout.flexbox .left {
            width: 300px;
            background: red;
        }

        .layout.flexbox .center {
            flex: 1;
            background: yellow;
        }

        .layout.flexbox .right {
            width: 300px;
            background: blue;
        }

    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>flexbox解决方案</h1>
            center
        </div>
        <div class="right"></div>

    </article>

</section>

<!--表格布局-->
<section class="layout table">
    <style>
        /*.layout.table {*/
        /*    margin-top: 140px;*/
        /*}*/

        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;
        }

        .layout.table .left-center-right > div {
            display: table-cell;
        }

        .layout.table .left {
            width: 300px;
            background: red;
        }

        .layout.table .center {
            background: yellow;
        }

        .layout.table .right {
            width: 300px;
            background: blue;
        }

    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>表格解决方案</h1>
            center
        </div>
        <div class="right"></div>
    </article>

</section>

<!--网格布局-->
<section class="layout grid">
    <style media="screen">

        .layout.grid .left-center-right {
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }

        .layout.grid .left {

            background: red;
        }

        .layout.grid .center {
            background: yellow;
        }

        .layout.grid .right {
            background: blue;
        }

    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>网格解决方案</h1>
            center
        </div>
        <div class="right"></div>
    </article>

</section>
</body>
</html>
